<template>
     <div id="app" style="display: flex;flex-direction:column">
    <div style="height:100%">
      <router-view/>
    </div>
    <nav style="width:100%;display:flex; position:fixed;bottom:0;background:white">
      <router-link style="flex: 1;" to="/">
        <div class="item" @click="onItemClick(0)">
          <div :class="homePage"></div>
          <div class="itemInfo">首页</div>
        </div>
      </router-link>
      <router-link style="flex: 1;" to="/categry">
        <div class="item" @click="onItemClick(1)">
          <div :class="categryPage"></div>
          <div class="itemInfo">分类</div>
        </div>
        </router-link>
      <router-link style="flex: 1;" to="/cart">
        <div class="item" @click="onItemClick(2)">
          <div :class="cartPage"></div>
          <div class="itemInfo">购物车</div>
        </div>
      </router-link>
      <router-link style="flex: 1;" to="/mine">
        <div class="item" @click="onItemClick(3)">
          <div :class="myPage"></div>
          <div class="itemInfo">我的</div>
        </div>
    </router-link>
    </nav>
  </div>
</template>
<script>
import {getUserInfo} from '@/api/user.js'
export default {
    name: 'MainPage',
    data(){
      return {
        selectInDex:0,
      }
    },
    watch:{
      '$route'(to,from){
        console.log(to,from);
        if(to.name==='mine'){
          this.selectInDex=3;
        }else if(to.name==='cart'){
          this.selectInDex=2;
        }else if(to.name==='categry'){
          this.selectInDex=1;
        }else{
          this.selectInDex=0;
        }
        localStorage.setItem('selectInDex',this.selectInDex);
        //console.log(this.selectInDex,from);
        // this.selectInDex=Number(localStorage.getItem('selectInDex'));
      }
    },
    computed:{
      homePage(){
        return this.selectInDex==0?'homePage_active':'homePage';
      },
      categryPage(){
        return this.selectInDex==1?'categryPage_active':'categryPage';
      },
      cartPage(){
        return this.selectInDex==2?'cartPage_active':'cartPage';
      },
      myPage(){
        return this.selectInDex==3?'myPage_active':'myPage';
      }
    },
    beforeCreate(){
      //获取用户信息以方便显示不同的用户的数据。  首次加载时候获取，并保存处理。
        getUserInfo().then(res=>{
          //console.log('获取用户信息1',res);
          if(res.Code == 200){
             this.userInfo = res.Data;
             localStorage.setItem('userInfo',JSON.stringify(res.Data));
          }else{
            localStorage.removeItem('userInfo')
          }
         
        })
      // this.selectInDex=localStorage.getItem('selectInDex')?Number(localStorage.getItem('selectInDex')):0;
    },
    mounted(){

      this.selectInDex=localStorage.getItem('selectInDex')?Number(localStorage.getItem('selectInDex')):0;
      if(this.$route.name==='mine'){
        this.selectInDex=3;
      }else if(this.$route.name==='cart'){
        this.selectInDex=2;
      }else if(this.$route.name==='categry'){
        this.selectInDex=1;
      }else{
        this.selectInDex=0;
      }
      
    },
    methods:{
      onItemClick(index){
        this.selectInDex=index;
        localStorage.setItem('selectInDex',index);  
      }
    }
  }

</script>
<style scoped>
</style>